<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>

  <body>
    <div id="root">
      <style>
        * {
          margin: 0;
          padding: 0;
        }

        html,
        body {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .loading {
          display: block;
          font-size: 0;
          color: #409eff;
          width: 82px;
          height: 72px;
        }

        .loading,
        .loading > div {
          position: relative;
          box-sizing: border-box;
        }

        .loading.la-dark {
          color: #333;
        }

        .loading > div {
          display: inline-block;
          float: none;
          background-color: currentcolor;
          border: 0 solid currentcolor;
        }

        .loading > div:nth-child(1) {
          position: absolute;
          bottom: 32%;
          left: 18%;
          width: 24px;
          height: 24px;
          border-radius: 100%;
          transform-origin: center bottom;
          animation: ball-climbing-dot-jump 0.6s ease-in-out infinite;
        }

        .loading > div:not(:nth-child(1)) {
          position: absolute;
          top: 0;
          right: 0;
          width: 24px;
          height: 2px;
          border-radius: 0;
          transform: translate(60%, 0);
          animation: ball-climbing-dot-steps 1.8s linear infinite;
        }

        .loading > div:not(:nth-child(1)):nth-child(2) {
          animation-delay: 0ms;
        }

        .loading > div:not(:nth-child(1)):nth-child(3) {
          animation-delay: -600ms;
        }

        .loading > div:not(:nth-child(1)):nth-child(4) {
          animation-delay: -1200ms;
        }

        @keyframes ball-climbing-dot-jump {
          0% {
            transform: scale(1, 0.7);
          }

          20% {
            transform: scale(0.7, 1.2);
          }

          40% {
            transform: scale(1, 1);
          }

          50% {
            bottom: 125%;
          }

          46% {
            transform: scale(1, 1);
          }

          80% {
            transform: scale(0.7, 1.2);
          }

          90% {
            transform: scale(0.7, 1.2);
          }

          100% {
            transform: scale(1, 0.7);
          }
        }

        @keyframes ball-climbing-dot-steps {
          0% {
            top: 0;
            right: 0;
            opacity: 0;
          }

          50% {
            opacity: 1;
          }

          100% {
            top: 100%;
            right: 100%;
            opacity: 0;
          }
        }

        @media (prefers-color-scheme: dark) {
          html,
          body {
            background-color: #000;
          }
        }

        @media (prefers-color-scheme: light) {
          html,
          body {
            background-color: #fff;
          }
        }
      </style>
      <div id="html_loding" class="loading">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <script>
      const appConfigMode = localStorage.getItem('persist:react-xs');
      if (appConfigMode) {
        const { app } = JSON.parse(appConfigMode);
        if (app) {
          const { color } = JSON.parse(app);
          if (color) {
            const loading = document.getElementById('html_loding');
            loading.style.color = color;
          }
        }
      }
    </script>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
